<template>
  <ul>
    <li v-for="(ee, index) in Message" :key="ee.id">
      <router-link to="/about/message/detail">{{ ee.title }}</router-link>
      <router-link :to="`/about/message/detail/${ee.id}`">{{
        ee.title
      }}</router-link>
      <button @click="pushShow(ee.id)">push查看前进</button>
      <button @click="replaceShow(ee.id)">replace查看后退</button>
    </li>
  </ul>
  <button @click="router.back()">返回</button>
  <button @click="router.forward()">前进</button>
  <router-view></router-view>
</template>
<script lang="ts">
export default {
  name: "Message",
};
</script>
<script lang="ts" setup>
// 引入方法
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
// 定义接口
interface Message {
  id: number;
  title: string;
}
const Message = ref<Message[]>([]);
onMounted(() => {
  setTimeout(() => {
    Message.value = [
      { id: 1, title: "Message01" },
      { id: 2, title: "Message02" },
      { id: 3, title: "Message03" },
    ];
  }, 1000);
});
// 获取路由信息
const router = useRouter()
// push跳转
const pushShow = (id:number) => {
  router.push({name:'detail',params:{id}})
}
// replace跳转
const replaceShow = (id:number) => {
router.replace(`/about/message/detail`/${id})
}
</script>
<style scoped></style>
